<template>
	<a-checkbox-group style="width: 100%" v-model:value="selectList">
		<div class="result_list" ref="resultRef">
			<div class="video_item" v-for="(item, index) in resultList"
				:class="isAgain && item.succeeded === 1 ? 'video_item_complete' : ''" :key="index">
				<template v-if="edit_model != 5">
					<videoItem :item="item" :isAgain="isAgain" @handlePlay="handlePlay" />
				</template>

				<template v-if="edit_model == 5">
					<imageTextItem :imageItem="item" />
				</template>
			</div>
			
			<empty context="已无可合成成片" v-if="resultList?.length === 0 && status === 'un_synthesized'" />
			<empty context="无已合成成片" v-if="resultList?.length === 0 && status === 'succeeded'" />
		</div>

		<materialPreview :visible="previewVisible" :materialDetail="materialDetail" @close="closePreview" />
	</a-checkbox-group>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		ref,
		watch
	} from "vue";
	import {
		useInfiniteScroll
	} from "@vueuse/core";
	import materialPreview from "../materialPreview.vue";
	import imageTextItem from "./imageTextItem.vue";
	import videoItem from "./videoItem.vue";
	import empty from './empty.vue';
	export default defineComponent({
		props: {
			dataList: {
				type: Array,
				default: [],
			},
			parentSelectList: {
				type: Array,
				default: [],
			},
			isAgain: {
				type: Boolean,
				default: false,
			},
			status: {
				type: String,
				default: "",
			},
			hasMore: {
				type: Boolean,
				default: false,
			},
			edit_model: {
				type: [String, Number],
				default: "",
			},
		},
		components: {
			materialPreview,
			imageTextItem,
			videoItem,
			empty
		},
		setup(props, context) {
			const state = reactive({
				checked: false,
				resultList: [],
				selectList: [],
				previewVisible: false,
				materialDetail: {},
			});

			const handlePlay = (item) => {
				state.previewVisible = true;
				state.materialDetail = item;
			};

			const closePreview = () => {
				state.previewVisible = false;
				state.materialDetail = {};
			};
			
			const resultRef = ref(null);
			useInfiniteScroll(
				resultRef,
				() => {
				  context.emit("getMore");
				},
				{ distance: 10, canLoadMore: () => props.hasMore }
			);

			watch(
				() => props.dataList,
				(val) => {
					state.resultList = val;
				}
			);

			watch(
				() => state.selectList,
				(val) => {
					context.emit("change", val);
				}, {
					immediate: true,
				}
			);

			watch(
				() => props.parentSelectList,
				(val) => {
					state.selectList = val;
				}
			);

			return {
				...toRefs(state),
				resultRef,
				handlePlay,
				closePreview,
			};
		},
	});
</script>

<style lang="less" scoped>
	.result_list {
		width: 100%;
		height: calc(100vh - 150px);
		padding: 10px;
		overflow-y: scroll;
		display: flex;
		flex-wrap: wrap;

		&::-webkit-scrollbar {
			width: 6px;
		}

		&::-webkit-scrollbar-track {
			width: 5px;
			background-color: transparent;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(193, 193, 193, 0.5);
			background-clip: padding-box;
			min-height: 28px;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
		}

		.video_item {
			width: 296px;
			margin-left: 10px;
			margin-top: 10px;

			&.video_item_complete {
				position: relative;
				height: 588px;

				.succeeded {
					position: absolute;
					width: 77px;
					height: 28px;
					display: flex;
					align-items: center;
					justify-content: center;
					left: 0;
					top: 0;
					border-radius: 4px;
					background: #17a058;
					color: #fff;
					box-sizing: border-box;
					z-index: 99;
					font-size: 14px;
					pointer-events: none;
				}

				&::before {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0;
					top: 0;
					z-index: 99;
					border-radius: 4px;
					border: 4px solid #17a058;
					box-sizing: border-box;
					pointer-events: none;
					content: "";
				}
			}
		}
	}
</style>